<template>
  <div class="data-table">
    <div class="chart-title">
  <span>📋</span> 健康数据记录
  <button class="export-btn" @click="exportToCSV">导出CSV</button>
</div>
    <table>
      <thead>
      <tr>
        <th>日期</th>
        <th>收缩压 (mmHg)</th>
        <th>舒张压(mmHg)</th>
        <th>血糖 (mmol/L)</th>
        <th>心率 (BPM)</th>
        <th>状态</th>
      </tr>
      </thead>
      <tbody>
      <tr v-if="data.length === 0">
        <td colspan="6">数据加载中...</td>
      </tr>
      <tr v-for="item in data" :key="item.recordDate">
        <td>{{ item.date }}</td>
        <td>{{ item.systolic || 'N/A' }}</td>
        <td>{{ item.diastolic|| 'N/A' }}</td>
        <td>{{ item.bloodSugar ? item.bloodSugar.toFixed(1) : 'N/A' }}</td>
        <td>{{ item.heartRate || 'N/A' }}</td>
        <td>
          <span class="status-indicator" :class="getStatusClass(item, 'bp')"></span>血压<br>
          <span class="status-indicator" :class="getStatusClass(item, 'bs')"></span>血糖<br>
          <span class="status-indicator" :class="getStatusClass(item, 'hr')"></span>心率
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    data: Array
  },
  methods: {
    exportToCSV() {
      const csvContent = [
        '日期,收缩压(mmHg),舒张压(mmHg),血糖(mmol/L),心率(BPM)',
        ...this.data.map(item => {
          const values = [
            `"${item.date}"`,
            item.systolic || 'N/A',
            item.diastolic || 'N/A',
            item.bloodSugar ? item.bloodSugar.toFixed(1) : 'N/A',
            item.heartRate || 'N/A'
          ];
          return values.join(',');
        })
      ].join('\n');

      const blob = new Blob([`\uFEFF${csvContent}`], { type: 'text/csv;charset=utf-8;' });
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = `健康数据_${new Date().toISOString().slice(0,10)}.csv`;
      link.click();
    },
    getStatusClass(item, type) {
      const status = this.$parent.evaluateHealthStatus(item)[type];
      return {
        'normal-indicator': status === 'normal',
        'warning-indicator': status === 'warning',
        'danger-indicator': status === 'danger'
      };
    }
  }
}
</script>


<style scoped>
@import "@/assets/css/analysis..css";
</style>